import { useEffect, useMemo, useRef, useState } from 'react'
import PageComponent from '@components/pageComponent'
import style from './index.module.less'
import { getDetailRequest, getOperateRequest, addOperateUsedRequest } from './ajax'
import { awaitWrap } from '@src/assets/js/tool'
import PageLoading from '@components/pageLoading'
import PageEmpty from '@components/pageEmpty'
import { Tabs, Swiper, ActionSheet, Toast } from 'antd-mobile'
import CaseInfo from './pages/caseInfo'
import Court from './pages/court'
import Defince from './pages/defince'
import { AddOutline } from 'antd-mobile-icons'

const pageMap = {
  'totalInfo': CaseInfo,
  'party_zuting': Court,
  'party_dabian': Defince,
}

async function initCaseDetail (id, setLoading, setData) {
  setLoading(true)
  const [e, d] = await awaitWrap(getDetailRequest(id))
  setLoading(false)
  if (e === null && d !== null) {
    setData(d)
  }
}

async function initOperate (id, setUnuse, setUsed, callback = () => {}) {
  const [e, d] = await awaitWrap(getOperateRequest(id))
  if (e === null && d !== null) {
    setUnuse(d.unuse)
    const l = [{ key: 'totalInfo', title: '仲裁申请书' }, ...d.used]
    setUsed(l)
    callback(l)
  }
}

async function addOperate (id, operate, callback) {
  Toast.show({ content: '加载中', icon: 'loading', duration: 0 })
  const [e] = await awaitWrap(addOperateUsedRequest(id, operate))
  if (e === null) {
    Toast.clear()
    callback()
  }
}

function Main ({ meta }) {
  const swiperRef = useRef()
  const [loading, setLoading] = useState(true)
  const [data, setData] = useState(null)
  const [activeIndex, setActiveIndex] = useState(0);
  const [visible, setVisible] = useState(false)
  const [used, setUsed] = useState([
    { key: 'totalInfo', title: '仲裁申请书' },
  ])
  const [unuse, setUnuse] = useState([])
  const actions = useMemo(() => {
    const l = unuse.map(li => ({ text: li.title, key: li.key }))
    return l
  }, [unuse])
  const id = useMemo(() => {
    return meta.id || ''
  }, [meta])
  useEffect(() => {
    initCaseDetail(id, setLoading, setData)
    initOperate(id, setUnuse, setUsed)
  }, [id])
  if (!loading && !data) {
    return (
      <PageComponent title='案件详情'>
        <div className={style.container}>
          <PageEmpty />
        </div>
      </PageComponent>
    )
  }
  if (loading) {
    return (
      <PageComponent title='案件详情'>
        <div className={style.container}>
          <PageLoading />
        </div>
      </PageComponent>
    )
  }
  return (
    <PageComponent title='案件详情' right={(
      unuse.length > 0 && <a className={style.add} onClick={() => setVisible(true)}><AddOutline /><span>添加操作</span></a>
    )}>
      <ActionSheet
        visible={visible}
        actions={actions}
        cancelText='取消'
        onClose={() => setVisible(false)}
        onAction={(v) => {
          addOperate(id, v.key, () => {
            initOperate(id, setUnuse, setUsed, (l) => {
              const i = l.findIndex(o => o.key === v.key)
              setActiveIndex(i)
              setTimeout(() => {
                swiperRef.current.swipeTo(i);
              }, 0)
            })
          })
          setVisible(false)
        }}
      />
      <div className={style.container}>
        <div className={style.header}>
          <Tabs
            activeKey={used[activeIndex].key}
            stretch={false}
            onChange={k => {
              const i = used.findIndex((o) => o.key === k)
              setActiveIndex(i)
              swiperRef.current.swipeTo(i);
            }}
          >
            {used.map((item) => (
              <Tabs.Tab title={item.title} key={item.key} />
            ))}
          </Tabs>
        </div>
        <div className={style.body}>
          <div className={style.inner}>
            <Swiper
              ref={swiperRef}
              direction='horizontal'
              indicator={() => null}
              defaultIndex={activeIndex}
              onIndexChange={(index) => {
                setActiveIndex(index);
              }}
            >
              {
                used.map(li => {
                  const Page = pageMap[li.key]
                  return (
                    <Swiper.Item key={li.key}>
                      <div className={style.page}>
                        <Page data={data} />
                      </div>
                    </Swiper.Item>
                  )
                })
              }
            </Swiper>
          </div>
        </div>
      </div>
    </PageComponent>
  )
}

export default  Main
